<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <link href="question1.css" rel="stylesheet">
    <style>
        .error{
            font-size: 13px;
            color: red;
        }
        .suc{
            font-size: 20px;
            color: blue;
        }

    </style>
    <script>
        $(function(){
            let flag = true;
            $("#name").blur(function(){
                var name = $(this).val();
                if(name.length < 4){
                    $("#emailn").text("长度不能小于4").addClass("error").removeClass("suc");
                    flag = false;
                    return flag;
                }
                var re=/^(\w|[\u4E00-\u9FA5])*$/;
                if (!re.test(name)){
                    $("#emailn").text("请输入英文、数字或中文").addClass("error").removeClass("suc");
                    flag = false;
                    return flag ;
                }
                $("#emailn").text("√").removeClass("error").addClass("suc");
                flag = true;
            });
            $("#pass").blur(function(){
                var pass = $(this).val();
                if(pass.length < 6 || pass.length >16){
                    $("#emailpass").text("密码长度只能为6~16").addClass("error").removeClass("suc");
                    flag = false;
                    return flag;
                }
                $("#emailpass").text("√").removeClass("error").addClass("suc");
                flag = true;
            });
            $("#repass").blur(function(){
                var repass = $(this).val();
                var pass = $("#pass").val();
                if(pass == ""){
                    $("#emailre").text("请输入密码").addClass("error").removeClass("suc");
                    flag = false;
                    return flag;
                }
                if(pass!==repass){
                    $("#emailre").text("两次密码不一致").addClass("error").removeClass("suc");
                    flag = false;
                    return flag;
                }
                $("#emailre").text("√").removeClass("error").addClass("suc");
                flag = true;
            });
            $("#yzm").blur(function(){
                var yzm = $(this).val();
                if(yzm == ""){
                    $("#yzmp").text("请输入验证码").addClass("error").removeClass("suc");
                    flag = false;
                    return flag;
                }
                if(yzm !== "aepo"){
                    $("#yzmp").text("验证码不正确").addClass("error").removeClass("suc");
                    flag = false;
                    return flag;
                }
                $("#yzmp").text("√").removeClass("error").addClass("suc");
                flag = true;
            });
            $("form").submit(function(){
                $(":checkbox").each(function(){
                    if(!this.checked){
                        alert("请同意用户服务条款");
                        return false;
                    }
                });
                if(!flag){
                    alert("请输入正确信息");
                }
                return flag;
             });
        });
    </script>
</head>
<body>
<form action="../stu11.23/form1.html">
<ul id="d1">
    <li><div class="input float"><img src="img/login-input5.png"><input id="email" type="email" placeholder="请输入您的常用邮箱" required></div><div class="span clear"><span id="emailp">请输入您的常用邮箱</span></div></li>
    <li><div class="input float"><img src="img/login-input1.png"><input id="name" type="text" maxlength="11" placeholder="请输入昵称" required></div><div class="span clear"><span id="emailn">  4-12位字符、英文、数字或者中文均可</span></div></li>
    <li><div class="input float"><img src="img/login-input2.png"><input id="pass" type="password" placeholder="请输入密码" required></div><div class="span clear"><span id="emailpass">  6-16位字符或数字、字母区分大小写</span></div></li>
    <li><div class="input float"><img src="img/login-input2.png"><input id="repass" type="password" placeholder="请再次输入密码" required></div><div class="span clear"><span id="emailre"></span></div></li>
    <li><div class="input float yanzhen"><img src="img/login-input3.png"><input id="yzm" type="text" placeholder="请输入右侧验证码" required></div><div class="img clear"><img src="img/yanzhengma.png"><span id="yzmp"></span></div></li>
    <li><input id="chk" type="checkbox">同意<a href="#">用户服务条款</a></li>
    <li><input type="submit">注册</input></li>
</ul>
</form>
</body>
</html>